<template>
  <div class="about">
    <h1>访问state中数据</h1>
    <div>直接获取 : {{ $store.state.student.students}}</div>
    <div>辅助函数获取 : {{ mystudent }}</div>
    <br />
    <div>获取 snumb : {{ snumb }}</div>
    -----------------------------------
    <h3>访问getters中的数据</h3>
    <br>
    <div>直接获取 : {{$store.getters["student/fmtNumb"]}}</div>
    <div>辅助函数获取 : {{ fmtNmub }}</div>
    ----------------------------------
    <h3>访问mutations中的数据</h3>
    <button @click="fn1">点击添加1</button>
    <button @click="fn2">点击添加数据2</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default { 
  computed: {
    ...mapState({
      // 组件内属性名: state => state.模块名.属性
      mystudent: (state) => state.student.students,
      snumb: (state) => state.student.snumb,
    }),
    ...mapGetters({
      // 组件内属性名 : "模块名/属性"
      fmtNmub: "student/fmtNumb",
    }),
  },
  methods:{
    ...mapMutations({
      // 组件内属性名 : "模块名/方法名"
      addStu : "student/addStu"
    }),
    fn1(){
      this.addStu({name : "张奖励",age : 25})
    },
    ...mapActions({
      asyncAddStu : "student/asyncAddStu"
    }),
    fn2(){
      this.asyncAddStu({name : "王德发",age: 89 })
    }
    }
};
</script>
